<script setup>
import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import LEchart from "@/uni_modules/lime-echart/components/l-echart/l-echart.vue";
import * as  echarts from '@/statistics/echarts.esm';

import {onMounted, ref, nextTick} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {danrenmaoli, getjingli, niandumaoli, yuedumaoli} from "../../../request/api";
import {getMonthRangeTimestamps, timestampToDate} from "../../../utils";

const chartRef1 = ref(null);
const chartRef2 = ref(null);
const chartRef3 = ref(null);
const payload1 = ref({
  start_time:'',
  end_time:'',
  month:'',
  user_id:''
})
const payload2= ref({
  start_time:'',
  end_time:'',
  month:'',
  user_id:''
})
const payload3 = ref({
  start_time:'',
  end_time:'',
  year:'',
})
const saleList = ref([]);
let date = new Date();
onLoad(()=>{
  getSale();
});
const initDate1 = (year,month) => {
  payload1.value.month =month;
  let {start,end} = getMonthRangeTimestamps(year,month);
  payload1.value.start_time = start;
  payload1.value.end_time = end;
  payload1.value.startTime = timestampToDate(start);
  payload1.value.endTime = timestampToDate(end);
  getData1();
}
const initDate3= (year,month) => {
  payload3.value.year =year;
  let {start,end} = getYearTimestamps(year);
  payload3.value.start_time = start;
  payload3.value.end_time = end;
  payload3.value.startTime = timestampToDate(start);
  payload3.value.endTime = timestampToDate(end);
  getData3();
}
function getYearTimestamps(year) {
  // 构造开始时间戳
  let startDate = new Date(year, 0, 1); // 1月1日的零时零分零秒
  let startTimestamp = Math.floor(startDate.getTime() / 1000); // 转换为十位时间戳

  // 构造结束时间戳
  let endDate = new Date(year + 1, 0, 1); // 下一年的1月1日的零时零分零秒
  let endTimestamp = Math.floor(endDate.getTime() / 1000) - 1; // 减去1秒，确保是上一年的最后一秒

  return {
    start: startTimestamp,
    end: endTimestamp
  };
}
const initDate2= (year,month) => {
  payload2.value.month =month;
  let {start,end} = getMonthRangeTimestamps(year,month);
  payload2.value.start_time = start;
  payload2.value.end_time = end;
  payload2.value.startTime = timestampToDate(start);
  payload2.value.endTime = timestampToDate(end);
  getData2();
}
const getSale = () => {
  getjingli({

  }).then(res=>{
    saleList.value = res.data;
    payload1.value.user_id = res.data[0].id;
    payload1.value.userName= res.data[0].name;
    initDate1(date.getFullYear(),date.getMonth()+1);
  })
  initDate2(date.getFullYear(),date.getMonth()+1);
  initDate3(date.getFullYear(),date.getMonth()+1);

}
const getData1 = () => {
  danrenmaoli({
    start_time:payload1.value.start_time,
    end_time:payload1.value.end_time,
    user_id:payload1.value.user_id || 6,
  }).then(res=>{
    initChart1(res.data);
  })
}
const getData2 = () => {
  yuedumaoli(payload2.value).then(res=>{
    initChart2(res.data);

  })
}
const getData3= () => {
  niandumaoli(payload3.value).then(res=>{
    initChart3(res.data);

  })
}
const dateChange1 = ({detail:{value}}) => {
  let [year,month]= value.split('-')
  initDate1(year,month);
}
const dateChange2 = ({detail:{value}}) => {
  let [year,month]= value.split('-')
  initDate2(year,month);
}
const dateChange3 = ({detail:{value}}) => {
  let [year,month]= value.split('-')
  initDate3(year,month);
}
const initChart1 = async (data) => {
  const myChart = await chartRef1.value.init(echarts)
  let option = {

    xAxis: {
      type: 'category',
      data: data.map(item=>item.fhriqi),
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14
        },
      },
      axisLine: {
        lineStyle: {
          color: '#999999',
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,

      },
    },
    yAxis: [
      {
        name: '元',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 11
          },
        },
        axisLine: {
          lineStyle: {
            color: '#5F3FE7',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,

        }
      },
    ],

    series: [
      {
        type: 'bar',
        name: "下单数",
        data: data.map(item=>item.total_tonnage),

        barWidth: '15%',
        itemStyle: {
          color: '#5F3FE7' // 设置柱状图的颜色
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: "{c}元"
          }
        }
      },
    ]
  };
  myChart.setOption(option)
}
const initChart2 = async (data) => {
  const myChart = await chartRef2.value.init(echarts)
  let option = {

    xAxis: {
      type: 'category',
      data: data.map(item=>item.fhriqi),

      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14
        },
      },
      axisLine: {
        lineStyle: {
          color: '#999999',
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,

      },
    },
    yAxis: [
      {
        name: '元',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 11
          },
        },
        axisLine: {
          lineStyle: {
            color: '#5F3FE7',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,

        }
      },
    ],

    series: [
      {
        type: 'bar',
        name: "下单数",
        data: data.map(item=>item.total_tonnage),

        barWidth: '15%',
        itemStyle: {
          color: '#5F3FE7' // 设置柱状图的颜色
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: "{c}元"
          }
        }
      },
    ]
  };
  myChart.setOption(option)
}
const initChart3 = async (data) => {
  const myChart = await chartRef3.value.init(echarts)
  let option = {

    xAxis: {
      type: 'category',
      data: [1,2,3,4,5,6,7,8,9,10,11,12],
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14
        },
      },
      axisLine: {
        lineStyle: {
          color: '#999999',
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,

      },
    },
    yAxis: [
      {
        name: '元',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 11
          },
        },
        axisLine: {
          lineStyle: {
            color: '#5F3FE7',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,

        }
      },
    ],

    series: [
      {
        type: 'bar',
        name: "下单数",
        data: Object.values(data).map(item=>item.total),

        barWidth: '15%',
        itemStyle: {
          color: '#5F3FE7' // 设置柱状图的颜色
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: "{c}元"
          }
        }
      },
    ]
  };
  myChart.setOption(option)
}
const adminChange = ({detail:{value}}) => {
  let item = saleList.value[value];
  payload1.value.userName = item.name;
  payload1.value.user_id = item.id;
  getData1();
}
</script>
<template>
  <view class="gross-profit-statistics">
    <view class="chart-item">
      <text>单人毛利表</text>
      <view class="content">
        <view class="sift">
          <picker :range="saleList" range-key="name" @change="adminChange" >
            <view class="department">
              <text>{{payload1.userName}}</text>
              <image src="/static/down.png"></image>
            </view>
          </picker>
          <picker @change="dateChange1" :end="date" mode="date" fields="month">
            <view class="department">
              <text>{{payload1.month}}月</text>
              <image src="/static/down.png"></image>
            </view>
          </picker>
        </view>
        <view class="chart">
          <LEchart ref="chartRef1"></LEchart>
        </view>
      </view>
    </view>
    <view class="chart-item">
      <text>月度总体毛利统计</text>
      <view class="content">
        <view class="sift">
          <picker  @change="dateChange2" :end="date" mode="date" fields="month">
            <view class="department">
              <text>{{payload2.month}}月</text>
              <image src="/static/down.png"></image>
            </view>
          </picker>
        </view>
        <view class="chart">
          <LEchart ref="chartRef2"></LEchart>
        </view>
      </view>
    </view>

    <view class="chart-item">
      <text>年度总计毛利统计</text>
      <view class="content">
        <view class="sift">
          <picker  @change="dateChange3" :end="date" mode="date" fields="year">
            <view class="department">
              <text>{{payload3.year}}年</text>
              <image src="/static/down.png"></image>
            </view>
          </picker>
        </view>
        <view class="chart">
          <LEchart ref="chartRef3"></LEchart>
        </view>
      </view>
    </view>

  </view>
</template>


<style scoped lang="scss">
.gross-profit-statistics {
  width: 100%;
  display: flex;
  background-color: #fff;
  min-height: 100vh;
  flex-direction: column;

  .chart-item {
    display: flex;
    flex-direction: column;

    .content {
      width: 100%;
      padding: 25rpx 30rpx;

      .chart {
        width: 100%;
      }

      .sift {
        width: 100%;
        display: flex;
        align-items: center;

        .department {
          width: 180rpx;
          height: 55rpx;
          margin-right: 29rpx;
          background: #F0F3FA;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          text {
            font-weight: 500;
            margin-right: 18rpx;
            font-size: 26rpx;
            color: #333333;
            line-height: 72rpx;
          }

          image {
            width: 20rpx;
            height: 20rpx;
          }
        }

      }
    }

    > text {
      width: 750rpx;
      height: 88rpx;
      background-color: #f6f6f6;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 34rpx;
      color: #333333;

    }

  }
}
</style>
